<template>
    <el-dialog :title="title" custom-class="el-dialog-600" v-model="visible">
        <div class="reply-wrap" v-show="id">
            <div class="post-reply">
                <span>正在回复</span>
                <span class="post-reply_name">
                    {{ reply.name }}{{ reply.master == 1 ? '（博主）' : '' }}
                </span>
                <span>的评论：</span>
            </div>
            <div class="post-content">
                <span>{{ reply.content }}</span>
            </div>
        </div>
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
            <el-form-item label="内容" prop="content">
                <el-col :span="24">
                    <Emojis ref="addComent" v-model="form.content"></Emojis>
                </el-col>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="onCancel"> 取 消 </el-button>
            <el-button type="primary" :loading="loading" @click="onSubmit"> 确 认 </el-button>
        </template>
    </el-dialog>
</template>

<script>
import { getCurrentInstance, ref, reactive, watch } from 'vue';
import { adminInfoTalk as Api } from 'api';

export default {
    setup() {
        const { proxy } = getCurrentInstance();

        let id = ref(null);
        let loading = ref(false); //等待按钮
        let visible = ref(false); //弹窗开关
        let title = ref(null); // 标题
        let reply = ref({});
        // 表单
        let form = reactive({
            content: '', // 内容
            comment_level: 1 // 评论级别
        });
        // 验证
        let rules = {
            content: { required: true, message: '请输入留言/回复内容', trigger: 'change' }
        };

        const init = () => {
            title.value = id.value ? '回复留言' : '新增留言';
            form.comment_level = id.value ? 2 : 1;
            if (id.value) getById();
        };
        // 获取详情
        const getById = async () => {
            const { code, msg, data } = await proxy.$http.get(Api.getById, {
                params: { id: id.value }
            });

            if (code === 200) {
                reply.value = data.list;
            }
        };
        // 取消留言
        const onCancel = () => {
            reply.value = {};
            loading.value = false;
            visible.value = false;
        };

        const onSubmit = async () => {
            await proxy.$refs['formRef'].validate((valid) => {
                if (valid) loading.value = true;
            });

            if (loading.value) {
                let params = { content: form.content };

                if (id.value) params.id = id.value;

                const { code, data, msg } = await proxy.$http.post(Api.add, params);

                if (code === 200) {
                    proxy.$msg.success(msg);
                    proxy.$parent.getList();
                    visible.value = false;
                } else {
                    proxy.$msg.error(msg ? msg : data);
                }

                loading.value = false;
            }
        };

        watch(visible, (newVal, oldVal) => {
            newVal ? init() : proxy.$refs['formRef'].resetFields();
        });

        return {
            id,
            loading,
            visible,
            title,
            reply,
            form,
            rules,
            onCancel,
            onSubmit
        };
    }
};
</script>
